import {
    Element
} from './element';

export class RectNode extends Element {

    constructor(sf, options) {
        super(options.id);
        this.target = null;
        this.name = options.name;
        this.type = options.type;
        this.x = options.x;
        this.y = options.y;
        this.width = options.width;
        this.height = options.height;
        this.attr = options.attr || {};
        this.init(sf);
    }

    init(sf) {
        const target = sf.pager.set();

        const rect = sf.pager.rect(this.x, this.y, this.width, this.height);
        rect.attr({
            'fill': '#FFFFFF',
            'stroke': '#363da5',
            'stroke-linecap': 'round ',
            'stroke-width': .5,
            'opacity': 0.8
        });

        const borderTop = sf.pager.rect(this.x, this.y, this.width, 4);
        borderTop.attr({
            'fill': '#363da5',
            'stroke-width': 0
        });

        const text = sf.pager.text(this.x + this.width / 2, this.y + this.height / 2, this.name);
        text.attr({
            'font-family': 'Microsoft YaHei',
            'font-size': '14px',
            'fill': '#363da5'
        });
        target.push(rect);
        target.push(borderTop);
        target.push(text);

        if (sf.options.editable) {
            let connect, setting, close;
            const operate = sf.pager.set();
            if (this.type !== 'end') {
                connect = sf.pager.image(sf.options.imgPath + 'connect.png', this.x + this.width - 35, this.y + this.height - 14, 12, 12);
                connect.click(e => {
                    sf.options.node.onConnect(this);
                    sf.activeElem = this;
                    sf.connect(this.target, e);
                });
                operate.push(connect);
            }
            if (this.type !== 'start' && this.type !== 'end') {
                setting = sf.pager.image(sf.options.imgPath + 'setting.png', this.x + this.width - 55, this.y + this.height - 14, 12, 12);
                setting.click(e => {
                    sf.options.node.onSetting(this);
                });
                operate.push(setting);
            }
            close = sf.pager.image(sf.options.imgPath + 'close.png', this.x + this.width - 15, this.y + this.height - 14, 12, 12);
            close.click(e => {
                this.remove();
                sf.options.node.onClose(this);
            });
            operate.push(close);
            operate.attr('opacity', 0);
            target.push(operate);


            target.mouseover(e => {
                target.attr('opacity', 1);
                target.attr('cursor', 'pointer');
                target[3].attr('opacity', 1);
            });
            target.mouseout(e => {
                target.attr('opacity', 0.8);
                target.attr('cursor', 'default');
                target[3].attr('opacity', 0);
            });
            target.click(e => {
                if (sf.mode === 1) {
                    sf.activeElem = this;
                }
                if (sf.mode === 2 && sf.activeElem.id != this.id) {
                    sf.mode = 1;
                    sf.pager.canvas.style.cursor = 'default';
                    sf.pager.canvas.onmousemove = null;
                    sf.pager.canvas.onclick = null;
                    sf.tempPath.remove();
                    sf.path(sf.activeElem, this);
                }
            });

            let dragMove = (dx, dy, x, y, event) => {
                this.x = x - rect._x;
                this.y = y - rect._y;
                rect.attr({
                    'x': this.x,
                    'y': this.y
                });
                borderTop.attr({
                    'x': this.x,
                    'y': this.y
                });
                text.attr({
                    'x': this.x + this.width / 2,
                    'y': this.y + this.height / 2
                });
                if (this.type !== 'end') {
                    connect.attr({
                        'x': this.x + this.width - 35,
                        'y': this.y + this.height - 14
                    });
                }
                if (this.type !== 'start' && this.type !== 'end') {
                    setting.attr({
                        'x': this.x + this.width - 55,
                        'y': this.y + this.height - 14
                    });
                }
                close.attr({
                    'x': this.x + this.width - 15,
                    'y': this.y + this.height - 14
                });
                sf.trigger('rectresize', this);
            };
            let dragStart = (x, y, event) => {
                let _x = rect.attr('x');
                let _y = rect.attr('y');
                _x = x - _x;
                _y = y - _y;
                rect._x = _x;
                rect._y = _y;
                target.attr('opacity', 1);

            };
            let dragEnd = (event) => {
                target.attr('opacity', 0.8);
            };
            target.drag(dragMove, dragStart, dragEnd);
        }
        this.target = target;
    }

    setNode(options) {
        if (options) {
            if (options.name) {
                this.target[2].attr('text', this.name = options.name);
            }
            if (options.width || options.height) {
                this.width = options.width;
                this.height = options.height
                this.resize();
            }
            this.attr = options.attr;
        }
    }

    resize() {
        this.target[0].attr('width', this.width);
        this.target[0].attr('height', this.height);
        this.target[1].attr('width', this.width);
        this.target[2].attr('x', this.target[0].attr('x') + this.width / 2);
        this.target[2].attr('y', this.target[0].attr('y') + this.height / 2);
        this.target[3][0].attr('x', this.target[0].attr('x') + this.width - 35);
        this.target[3][0].attr('y', this.target[0].attr('y') + this.height - 14);
        this.target[3][1].attr('x', this.target[0].attr('x') + this.width - 55);
        this.target[3][1].attr('y', this.target[0].attr('y') + this.height - 14);
        this.target[3][2].attr('x', this.target[0].attr('x') + this.width - 15);
        this.target[3][2].attr('y', this.target[0].attr('y') + this.height - 14);
        sf.trigger('rectresize', this);
    }

    remove() {
        this.target.remove();
        sf.removeNode(this.id);
        sf.trigger('rectremove', this);
    }

    getNode() {
        const box = this.target.getBBox();
        return {
            id: this.id,
            name: this.name,
            type: this.type,
            attr: this.attr,
            x: box.x,
            y: box.y,
            width: box.width,
            height: box.height
        };
    }

    play() {

    }

}